<template>
  <div>
    <div class="box">
      <div @click="goSearch"><van-search shape="round" placeholder="请输入搜索关键词" /></div>

      <span @click="goLocation" class="location">{{ location }}</span>
    </div>
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in list.banner" :key="item.id">
        <img :src="item.image_url" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- 导航栏 -->
    <div class="box" style="margin-top: 20px;">
      <div v-for="item in list.channel" :key="item.id" @click="goCate(item.id)">
        <img :src="item.icon_url" alt="">
        <p>{{ item.name }}</p>
      </div>
    </div>
    <!-- 品牌制造商 -->
    <div>
      <h2 style="text-align: center">品牌制造商直供</h2>
    </div>
    <div class="bo">
      <div v-for="item in list.brandList" :key="item.id" @click="goBrand(item.id)">
        <div class="bigArtictop" :style="{ 'background-image': 'url(' + item.new_pic_url + ')' }">
          <p>{{ item.name }}</p>
          <p>{{ item.floor_price }}元起</p>
        </div>
      </div>
    </div>
    <router-link to="/home/news?name=news" class="new">
      <img src="http://jinglins.gitee.io/bufan-tesco-mall/assets/new-product-pic-ab17c35e.png" alt="">
    </router-link>
    <div class="firstswiper">
      <div
        class="firstswiper-div"
        v-for="item in list.newGoods"
        :key="item.id"
        @click="goDetail(item.id)"
      >
        <img :src="item.list_pic_url" alt="" />
        <div class="text">
          <p class="div-one">{{ item.name }}</p>
          <p class="div-two">{{ item.goods_brief }}</p>
          <p class="div-three">￥{{ item.retail_price }}</p>
        </div>
      </div>
    </div>
    <router-link to="/home/news?name=hot" class="new">
      <img src="http://jinglins.gitee.io/bufan-tesco-mall/assets/hot-recom-pic-743969c3.png
" alt="">
    </router-link>
    <div class="firstswiper">
      <div
        class="firstswiper-div"
        v-for="item in list.hotGoods"
        :key="item.id"
        @click="goDetail(item.id)"
      >
        <img :src="item.list_pic_url" alt="" />
        <div class="text">
          <p class="div-one">{{ item.name }}</p>
          <p class="div-two">{{ item.goods_brief }}</p>
          <p class="div-three">￥{{ item.retail_price }}</p>
        </div>
      </div>
    </div>
    <div class="special">
      <p class="title">专题精选</p>
      <div class="special-c">
        <div
          class="special-c-eg"
          v-for="item in list.topicList"
          :key="item.id"
          @click="handleClick(item.id)"
        >
          <img :src="item.scene_pic_url" alt="" />
          <p class="eg-title">
            {{ item.title }}
          </p>
          <span class="eg-price">{{ item.price_info }}元起</span>
          <p class="eg-content">{{ item.subtitle }}</p>
        </div>
      </div>
    </div>
    <div class="goodgoods">
      <div
        class="goodslist"
        v-for="item in list.newCategoryList"
        :key="item.id"
      >
        <p class="title">{{ item.name }}好物</p>
        <ul class="goodscard">
          <div
            v-for="ele in item.goodsList"
            :key="ele.id"
            @click="goDetail(ele.id)"
          >
            <img class="img" :src="ele.list_pic_url" alt="" />
            <p class="cardtitle">{{ ele.name }}</p>
            <p class="cardprice">￥{{ ele.retail_price }}</p>
          </div>
          <div class="more">
            {{ item.name }}好物
            <van-icon class="moreicon" name="arrow" />
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Index } from '@/api/home'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import AMap from 'AMap'

const store = useStore()
const router = useRouter()
const list = ref([])
const getCityInfo = store.state.cityInfo
const location = ref('')
const goLocation = () => {
  router.push({ name: 'locationView' })
}

onMounted(() => {
  if (getCityInfo.name) {
    location.value = getCityInfo.name
    return
  }
  AMap.plugin('AMap.CitySearch', function () {
    const citySearch = new AMap.CitySearch()
    citySearch.getLocalCity(function (status, result) {
      if (status === 'complete' && result.info === 'OK') {
        console.log(result)
        // 查询成功，result即为当前所在城市信息
        location.value = result.city
      }
    })
  })
})

Index().then(res => {
  console.log(res)
  list.value = res
})
const goCate = (id) => {
  router.push({ name: 'cageList', query: { id } })
}
const goDetail = (id) => {
  router.push({ name: 'cageListInfo', query: { id } })
}
const goBrand = (id) => {
  router.push({ name: 'brandView', query: { id } })
}
const handleClick = (id) => {
  router.push({
    name: 'topicDetail',
    query: {
      id: id
    }
  })
}
const goSearch = () => {
  router.push({ name: 'searchView' })
}
</script>

<script>
export default {
  name: 'homeView'
}
</script>

<style lang="scss" scoped>
.location{
width: 100px;
// font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.my-swipe {
  width: 100%;
  height: 400px;

  img {
    width: 100%;
    height: 100%;
  }
}
.bo {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  .bigArtictop {
    width: 350px;
    height: 190px;
    background-position: center;
    background-size: cover;
    padding-top: 20px;
    margin-bottom: 10px;
  }
}
.new{
  width: 95%;
  height: 240px;
  margin: 10px auto;
  img{
    width: 100%;
    height: 100%;
  }
}
.firstswiper {
    height: 491px;
    display: flex;
    overflow: auto;
    white-space: nowrap;
    padding: 0 20px;
    // padding: 20px;
    .firstswiper-div {
      width: 300px;
      height: 416px;
      border-right: 1px solid #d7d6d6;
      img {
        width: 254px;
        height: 254px;
      }
      .text {
        width: 254px;
        overflow: hidden;
        padding: 35px;
        .div-one {
          width: 210px;
          font-size: 30px;
          color: #333333;
          font-weight: 500;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .div-two {
          width: 216px;
          font-size: 24px;
          color: #999999;
          letter-spacing: 0;
          font-weight: 400;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .div-three {
          width: 53px;
          font-size: 24px;
          color: #9e4242;
          letter-spacing: 0;
          font-weight: 400;
          margin-top: 23px;
        }
      }
    }
  }
  .special {
    height: 626px;
    .title {
      margin-top: 20px;
      height: 130px;
      line-height: 130px;
      font-size: 38px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 600;
      text-align: center;
    }
    .special-c {
      display: flex;
      overflow: auto;
      white-space: nowrap;
      width: 750px;

      img {
        width: 556px;
        height: 309px;
        margin-bottom: 21px;
      }
      .special-c-eg {
        margin-left: 20px;
        position: relative;

        .eg-title {
          width: 330px;
          font-size: 30px;
          color: #333333;
          letter-spacing: 0;
          font-weight: 500;
          margin-bottom: 12px;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .eg-price {
          font-size: 24px;
          color: #9e4242;
          letter-spacing: 0;
          font-weight: 400;
          position: absolute;
          right: 0px;
          top: 334px; // margin-left: 161px;
        }
        .eg-content {
          width: 216px;
          font-size: 24px;
          color: #999999;
          letter-spacing: 0;
          font-weight: 400;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  }
  .goodgoods {
    .goodslist {
      .title {
        font-size: 38px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 600;
        text-align: center;
      }
      .goodscard {
        display: flex;
        align-content: center;
        flex-wrap: wrap;
        img {
          width: 350px;
          height: 350px;
        }
        .cardtitle {
          font-size: 26px;
          color: #333333;
          letter-spacing: 0;
          font-weight: 500;
          margin-left: 21px;
          width: 313px;
          text-overflow: ellipsis;
        }
        .cardprice {
          font-size: 26px;
          color: #9e4242;
          letter-spacing: 0;
          font-weight: 400;
          margin-left: 21px;
          margin-top: 5px;
        }
        .more {
          width: 350px;
          height: 350px;
          font-size: 32px;
          color: #666666;
          letter-spacing: 0;
          font-weight: 400;
          text-align: center;
          line-height: 350px;
        }
        .moreicon {
          width: 58px;
          height: 58px;
        }
      }
    }
  }

</style>
